<template>
  <view>
    <!-- 遮罩层 -->
    <view class="preview-mask" :class="{ 'mask-show': show }" @click="closePreview"></view>

    <!-- 预览容器 -->
    <view v-if="!isEnlarged" class="preview-container" :class="{ 'preview-show': show }" @click.stop>
      <!-- 左翻页按钮 -->
      <view class="nav-btn prev-btn" @click.stop="prevImage" v-if="currentIndex > 0">
        <uni-icons type="arrow-left" size="28" color="#850C13"></uni-icons>
      </view>
      <!-- 图片滑动区域 -->
      <swiper class="image-swiper" :current="currentIndex" @change="onSwiperChange" :duration="300">
        <swiper-item v-for="(item, index) in imageList" :key="index" class="swiper-item">
          <view class="image-area">
            <image :src="photoAlbumImgUrl(item.id)" mode="aspectFit" class="preview-image"
              @click.stop="handleClick(item)">
            </image>
          </view>
        </swiper-item>
      </swiper>
      <!-- 右翻页按钮 -->
      <view class="nav-btn next-btn" @click.stop="nextImage" v-if="currentIndex < imageList.length - 1">
        <uni-icons type="arrow-right" size="28" color="#850C13"></uni-icons>
      </view>
      <!-- 指示器 -->
      <view class="indicator">
        <text>{{ currentIndex + 1 }}</text> / {{ imageList.length }}
      </view>

      <!-- 信息区域 -->
      <view class="info-area">
        <view class="info-item">
          <text class="info-label">作者:</text>
          <text class="info-value">{{ imageList[currentIndex].createUserName || '未知' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">上传时间:</text>
          <text class="info-value">{{ imageList[currentIndex].createTime || '未知' }}</text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-bar" v-if="delFlag || downloadFlag">
        <view class="action-item" @click="handleDownload" v-if="downloadFlag">
          <image class="download" src="/static/img/photo-album-download.png" mode="aspectFill"></image>
          <text>下载</text>
        </view>
        <view class="action-item" @click="handleDelete" v-if="delFlag">
          <image class="del" src="/static/img/photo-album-del.png" mode="aspectFill"></image>
          <text>删除</text>
        </view>
      </view>

    </view>
    <!-- <image v-else :src="photoAlbumImgUrl(currentIMg.id)" mode="aspectFit" class="large-image"
      @click.stop="handleClick()">
    </image> -->
    <view v-else class="large-image"  @click.stop="handleClick()">
      <swiper class="large-image-swiper" :current="currentIndex" @change="onSwiperChange" :duration="300">
        <swiper-item v-for="(item, index) in imageList" :key="index" class="large-swiper-item">
          <view class="large-image-area">
            <image :src="photoAlbumImgUrl(item.id)" mode="aspectFit" class="large-preview-image" @click.stop="handleClick()"></image>
          </view>
        </swiper-item>
      </swiper>
      <!-- <view class="large-indicator">
        <text>{{ currentIndex + 1 }}</text> / {{ imageList.length }}
      </view> -->
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      isEnlarged: false, // 控制是否放大
      currentIMg: null
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    delFlag: {
      type: Boolean,
      default: false
    },
    downloadFlag: {
      type: Boolean,
      default: false
    },
    imageList: {
      type: Array,
      default: () => []
    },
    currentIndex: {
      type: Number,
      default: 0
    },
    paramsObj: {
      type: Object,
      default: () => { }
    },
  },
  computed: {
    currentImage() {
      return this.imageList[this.currentIndex] || {};
    }
  },
  methods: {
    handleClick(data) {
      if (data) {
        this.currentIMg = data;
      }
      this.isEnlarged = !this.isEnlarged; // 切换状态
    },
    photoAlbumUrl(id) {
      let password = this.paramsObj.password
      let shareCode = this.paramsObj.shareCode
      return (
        "/api/sharePhoto/download?id=" + id +
        "&password=" + password +
        "&shareCode=" + shareCode
      );
    },
    photoAlbumImgUrl(value) {
      // console.log(12, value);

      if (!value) return "";
      return this.photoAlbumUrl(value);
    },
    closePreview() {
      this.$emit('close');
    },
    handleDownload() {
      this.$emit('download', this.currentImage);
    },
    handleDelete() {
      this.$emit('delete', this.currentImage, this.currentIndex);
    },
    onSwiperChange(e) {
      this.$emit('change', e.detail.current);
    },
    prevImage() {
      if (this.currentIndex > 0) {
        this.$emit('change', this.currentIndex - 1);
      }
    },
    nextImage() {
      if (this.currentIndex < this.imageList.length - 1) {
        this.$emit('change', this.currentIndex + 1);
      }
    }
  }
}
</script>

<style scoped lang="scss">
/* 遮罩层样式 */
.preview-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 998;
  pointer-events: none;
}

.mask-show {
  opacity: 1;
  pointer-events: auto;
}

/* 预览容器样式 */
.preview-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  padding: 20rpx;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 999;
  height: 65vh;
  display: flex;
  flex-direction: column;
}

.preview-show {
  transform: translateY(0);
}

/* 图片滑动区域 */
.image-swiper {
  flex: 1;
  height: 100%;
}

.swiper-item {
  height: 100%;
}

.image-area {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 76rpx;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
}

/* 指示器 */
.indicator {
  position: absolute;
  top: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.25);
  color: #FFFFFF;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 28rpx;

  text {
    color: #850C13;
    padding-right: 6rpx;
  }
}

/* 导航按钮 */
.nav-btn {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background-color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.prev-btn {
  left: 8rpx;
}

.next-btn {
  right: 8rpx;
}

/* 信息区域 */
.info-area {
  padding-left: 60rpx;
  margin-bottom: 120rpx;

  .info-item {
    display: flex;
    margin-bottom: 28rpx;

    .info-label {
      width: 158rpx;
      font-size: 30rpx;
      color: #999999;
      line-height: 32rpx;
      letter-spacing: 1px;
    }

    .info-value {
      flex: 1;
      font-size: 30rpx;
      color: #333333;
      line-height: 32rpx;
      letter-spacing: 1px;

    }
  }
}
/* 操作按钮区域 */
.action-bar {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  bottom: 16rpx;

  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .download {
      width: 48rpx;
      height: 48rpx;
    }

    .upload {
      width: 48rpx;
      height: 48rpx;
    }

    .del {
      width: 48rpx;
      height: 48rpx;
    }

    text {
      font-size: 24rpx;
      color: #333;
      line-height: 32rpx;
      letter-spacing: 1px;
      margin-top: 8rpx;
    }
  }
}

.large-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  .large-image-swiper {
    width: 100%;
    height: 100%;
    .large-swiper-item {
      width: 100%;
      height: 100%;
    }
    .large-image-area {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .large-preview-image{
          width: 100vw;
          height: 100vh;
      }
    }

  }
  .large-indicator {
  position: absolute;
  bottom: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  // background-color: rgba(0, 0, 0, 0.25);
  color: #FFFFFF;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 28rpx;

  text {
    color: #850C13;
    padding-right: 6rpx;
  }
}

}
</style>